<html class="js  ui-mobile"><head><base href="http://mobipick.sustainablepace.net/demo.html"> 
	<title>Mobi Pick - Basic demo</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
	<link rel="shortcut icon" href="demo/favicon.ico" type="image/x-icon">
	<style type="text/css">
		div.demo {
			border-bottom: 1px dotted gray;
			margin-bottom: 2em;
		}
		input {
			margin: 2em 0;
		}
	</style>
	<link rel="stylesheet" href="external/jquery.mobile-1.3.0.min.css">
	<link href="css/mobipick.css" rel="stylesheet" type="text/css">


	<script type="text/javascript" src="demo/shCore.js"></script>
	

	<script type="text/javascript" src="external/xdate.js"></script>
	<script type="text/javascript" src="external/xdate.i18n.js"></script>
	<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="external/jquery.mobile-1.3.0.min.js"></script>
	<script type="text/javascript" src="js/mobipick.js"></script>
	<script type="text/javascript">
        
		$( document ).on( "pagecreate", "#demo", function() {
			SyntaxHighlighter.all();

			var picker = $( "input[type='text']", this );

			picker.mobipick();

			picker.on( "change", function() {
					var date = $( this ).val();

					// formatted date					
					var dateObject = $( this ).mobipick( "option", "date" );
			});
		});
	</script>
</head>
<body class="ui-mobile-viewport ui-overlay-c">
	<div id="demo" data-role="page" class="ui-body-b ui-page ui-body-c ui-page-active" data-url="demo" tabindex="0" style="min-height: 339px;">
		<div data-role="header" class="ui-body-b ui-header ui-bar-a" role="banner">
			<h1 class="ui-title" role="heading" aria-level="1">Mobi Pick - Basic demo</h1>
		</div>
		<div data-role="content" class="ui-body-b ui-content" role="main">
			<div class="demo">			
				<h1>Basic Datepicker</h1>			
				<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-b"><input type="text" readonly="readonly" class="ui-input-text ui-body-b"></div>

				<br><br>
				Load styles and scripts
				<div><div id="highlighter_5845" class="syntaxhighlighter  xml"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">link</code> <code class="xml color1">rel</code><code class="xml plain">=</code><code class="xml string">"stylesheet"</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/css"</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"css/mobipick.css"</code> <code class="xml plain">/&gt;</code></div><div class="line number2 index1 alt1"><code class="xml plain">&lt;</code><code class="xml keyword">script</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/javascript"</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"external/xdate.js"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></div><div class="line number3 index2 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">script</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/javascript"</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"external/xdate.i18n.js"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></div><div class="line number4 index3 alt1"><code class="xml plain">&lt;</code><code class="xml keyword">script</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/javascript"</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"js/mobipick.js"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></div></div></td></tr></tbody></table></div></div>

				Create an input within your jQuery Mobile page. Input type is "text" in order to suppress native datepicker.
				<div><div id="highlighter_337730" class="syntaxhighlighter  xml"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">input</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text"</code> <code class="xml plain">/&gt;</code></div></div></td></tr></tbody></table></div></div>

				Apply Mobi Pick after jQuery Mobile page is created (basic configuration).
				<div><div id="highlighter_193241" class="syntaxhighlighter  js"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">$( document ).on( </code><code class="js string">"pagecreate"</code><code class="js plain">, pageselector, </code><code class="js keyword">function</code><code class="js plain">() {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">picker = $( </code><code class="js string">"input[type='text']"</code><code class="js plain">, </code><code class="js keyword">this</code> <code class="js plain">);</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">picker.mobipick();</code></div><div class="line number4 index3 alt1"><code class="js plain">});</code></div></div></td></tr></tbody></table></div></div>

				Optionally handle date changes (works with native and mobipick datepicker)
				<div><div id="highlighter_73884" class="syntaxhighlighter  js"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">picker.on( </code><code class="js string">"change"</code><code class="js plain">, </code><code class="js keyword">function</code><code class="js plain">() {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">// formatted date, like yyyy-mm-dd&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">date = $( </code><code class="js keyword">this</code> <code class="js plain">).val();</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">// JavaScript Date object</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">dateObject = $( </code><code class="js keyword">this</code> <code class="js plain">).mobipick( </code><code class="js string">"option"</code><code class="js plain">, </code><code class="js string">"date"</code> <code class="js plain">);</code></div><div class="line number7 index6 alt2"><code class="js plain">});</code></div></div></td></tr></tbody></table></div></div>
			</div>
			Created by Christoph Baudson. Feel free to check out my <a href="http://sustainablepace.net" class="ui-link">blog</a>.
		</div>

	</div>


<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div><div class="ui-popup-screen ui-overlay-a ui-screen-hidden"></div><div class="ui-popup-container ui-popup-hidden"><div class="mobipick-main ui-popup ui-body-a ui-overlay-shadow ui-corner-all" aria-disabled="false" data-disabled="false" data-theme="a" data-overlay-theme="a" data-shadow="true" data-corners="true" data-transition="none" data-position-to="window" data-dismissible="false" style="max-width: 300px;"><div class="mobipick-date-formatted">Saturday, March 2, 2013</div><ul class="mobipick-groups"><li class="mobipick-inline-block" style="width: 31.333333333333332%;"><ul><li><a class="mobipick-next-day ui-body-b ui-corner-all" href="#" style="border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;">+</a></li><li><input type="text" class="mobipick-input mobipick-day ui-shadow-inset" readonly="readonly"></li><li><a class="mobipick-prev-day ui-body-b ui-corner-all" href="#" style="border-top-left-radius: 0px; border-top-right-radius: 0px;">-</a></li></ul></li><li class="mobipick-inline-block" style="width: 31.333333333333332%;"><ul><li><a class="mobipick-next-month ui-body-b ui-corner-all" href="#" style="border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;">+</a></li><li><input type="text" class="mobipick-input mobipick-month ui-shadow-inset" readonly="readonly"></li><li><a class="mobipick-prev-month ui-body-b ui-corner-all" href="#" style="border-top-left-radius: 0px; border-top-right-radius: 0px;">-</a></li></ul></li><li class="mobipick-inline-block" style="width: 31.333333333333332%;"><ul><li><a class="mobipick-next-year ui-body-b ui-corner-all" href="#" style="border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;">+</a></li><li><input type="text" class="mobipick-input mobipick-year ui-shadow-inset" readonly="readonly"></li><li><a class="mobipick-prev-year ui-body-b ui-corner-all" href="#" style="border-top-left-radius: 0px; border-top-right-radius: 0px;">-</a></li></ul></li></ul><ul class="mobipick-buttons"><li><a class="mobipick-set ui-body-b ui-corner-all" href="#">Accept</a></li><li><a class="mobipick-cancel ui-body-b ui-corner-all" href="#">Cancel</a></li></ul></div></div></body></html>